<%@ page import="coop.bancocredicoop.proyectos.gd.Document" %>
<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main">
        <title>Cantidad de documentos digitalizados</title>

        <link href="${resource(dir: 'css', file: 'datepicker.css')}" rel="stylesheet"/>
    
        <script type="text/javascript" src="${resource(dir: 'js', file: 'bootstrap-datepicker.js')}"></script>
        <script type="text/javascript" src="${resource(dir: 'js', file: 'locales/bootstrap-datepicker.es.js')}"></script>
        <script>
            $(document).ready(function() {
                $("#botonBuscar").on('click', function(e) {
                    e.preventDefault()
                    // $('#customerDescription').remove();
                    this.form.submit();
                });
                $('#dateFrom').datepicker({
                    format: 'dd/mm/yyyy',
                    language: 'es'
                });
                $('#dateTo').datepicker({
                    format: 'dd/mm/yyyy',
                    language: 'es'
                });
                
                <g:if test="${params.dateFrom}">
                $('#dateFrom').datepicker('setDate', new Date(${params.dateFrom[6..9] as Integer}, 
                                                          ${(params.dateFrom[3..4] as Integer) - 1},
                                                          ${params.dateFrom[0..1] as Integer}));
                </g:if>
                <g:if test="${params.dateTo}">
                $('#dateTo').datepicker('setDate', new Date(${params.dateTo[6..9] as Integer}, 
                                                          ${(params.dateTo[3..4] as Integer) - 1},
                                                          ${params.dateTo[0..1] as Integer}));
                </g:if>

            });
            
            function clearCustomer() {

				$('#customerId').val('')
				$('#customerDescription').val('')
				$('#customer').html('')

                return false
            }

            function cambiarPagina(pageOffset) {
                pageOffset = pageOffset >= 0 ? pageOffset : 0;
                $("#offset").val(pageOffset)
                $("#botonBuscar").click();
                return false
            }

        </script>
    </head>
    <body>
        <div class="container">
        <div class="main-panel">
        <div class="panel panel-default">
        <div class="panel-heading"><h2>Cantidad de documentos digitalizados</h2></div>
        <div class="panel-body">

        <g:form method="GET" action="cantidad">
            <div class="form-group">
                <label for="customer">Cliente</label>
                <input type="hidden" id="customerId" name="customerId" value="${params.customerId}" />
                <input type="hidden" id="customerDescription" name="customerDescription" value="${params.customerDescription}" />
                <div class="row">
                <div class="col-xs-10">
                    <div class="input-group">
                        <g:if test="${params.customerDescription}">
                            <div class="form-control" id="customer">${params.customerDescription}</div>
                        </g:if>
                        <g:else>
                            <div class="form-control" id="customer"><span style="color:#aaa">Cliente</span></div>
                        </g:else>
                        
                        <span class="input-group-btn">
                            <a href="#" onclick="return clearCustomer()" class="btn btn-default" title="Borrar"><span class="glyphicon glyphicon-remove"></span></a>
                        </span>
                    </div>
                </div>
                <div class="col-xs-2">
                    <a data-toggle="modal" href="${createLink(controller: 'buscarCliente', action: 'modalIndex')}" data-target="#buscarClienteModal" class="btn btn-default">Buscar Cliente</a>
                </div>
                </div>
            </div>

            <div class="form-group">
                <label for="cajaId">Caja</label>
                <input id="cajaId" type="text" class="form-control" name="cajaId" placeholder="Caja" value="${params.cajaId}" />
            </div>
            
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-3">
                    <label for="dateFrom">Fecha desde</label>
                    <input type="text" class="form-control" id="dateFrom" name="dateFrom" style="max-width: 12em;">
                    </div>
                    <div class="col-xs-3">
                    <label for="dateTo">Fecha hasta</label>
                    <input type="text" class="form-control" id="dateTo" name="dateTo" style="max-width: 12em;">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label>Agrupar por</label>
                <div class="row" id="reportType">
                  <div class="col-xs-2">
                  <div class="checkbox">
                  <label>
                    <input type="radio" name="reportType" id="reportType1" value="byCustomer" 
                     <g:if test="${reportType == 'byCustomer'}">checked</g:if> />
                  Cliente
                  </label>
                  </div>
                  </div>
                  <div class="col-xs-2">
                  <div class="checkbox">
                  <label>
                    <input type="radio" name="reportType" id="reportType2" value="byBox"
                     <g:if test="${reportType == 'byBox'}">checked</g:if> />
                    Caja AdeA
                  </label>
                  </div>
                  </div>
                  <div class="col-xs-2">
                  <div class="checkbox">
                  <label>
                    <input type="radio" name="reportType" id="reportType3" value="byDate"
                     <g:if test="${reportType == 'byDate'}">checked</g:if> />
                    Fecha de proceso
                  </label>
                  </div>
                  </div>
                </div>
            </div>

            <div class="form-group">
                <g:actionSubmit id="botonBuscar" value="Buscar" class="btn btn-primary" onclick="beforeSubmit()" />
            </div>

            <g:if test="${items}">

            <g:if test="${reportType == 'byCustomer'}">
            <table class="table table-striped">
            <thead>
                    <tr>
                        <th>Cliente</th>
                        <th>Cantidad</th>
                    </tr>
                </thead>
                <tbody>
                <g:each in="${items}" status="i" var="row">
                    <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
                        <td>${row.customer.idPersona} (${row.customer.name}, CUIT: ${row.customer.cuit})</td>
                        <td>${row.amount}</td>
                    </tr>
                </g:each>
                </tbody>
            </table>
            </g:if>

            <g:if test="${reportType == 'byBox'}">
            <table class="table table-striped">
            <thead>
                    <tr>
                        <th>Caja</th>
                        <th>Cantidad</th>
                    </tr>
                </thead>
                <tbody>
                <g:each in="${items}" status="i" var="row">
                    <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
                        <td>${row.box.cajaId}</td>
                        <td>${row.amount}</td>
                    </tr>
                </g:each>
                </tbody>
            </table>
            </g:if>

            <g:if test="${reportType == 'byDate'}">
            <table class="table table-striped">
            <thead>
                    <tr>
                        <th>DÃ­a</th>
                        <th>Cantidad</th>
                    </tr>
                </thead>
                <tbody>
                <g:each in="${items}" status="i" var="row">
                    <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
                        <td>${row.dayCreated}</td>
                        <td>${row.amount}</td>
                    </tr>
                </g:each>
                </tbody>
            </table>
            </g:if>

            <input type="hidden" id="offset" name="offset" />
            <g:render template="/shared/pagination" 
                      model="[itemPerPage: itemsPerPage, offset: offset, totalItems: totalItems, changeOffsetFunction: 'cambiarPagina']" />
            </g:if>
            <g:elseif test="${totalItems != null}">
                <div class="alert alert-warning">
                No se encontraron resultados
                </div>                
            </g:elseif>
        </g:form>

        </div>
        </div>
        </div>
        </div>

        <div class="modal fade" id="buscarClienteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
    </body>
</html>